<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>结账</title>
  <meta name="keywords" content="">
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width,minimum-scale=0.5,maximum-scale=1.0,initial-scale=1.0,user-scalable=no"/>
  <link rel="stylesheet" href="/static/css/main.css">
  <link rel="stylesheet" type="text/css" href="/static/css/index.css?v=1.0.1"/>
  <script src="/static/js/jquery-2.2.3.min.js"></script>
  <script src="/static/js/pxtorem.js"></script>
  <script src="/static/js/adress.js" type="text/javascript" charset="utf-8"></script>
  <script src="https://a.alipayobjects.com/g/h5-lib/alipayjsapi/3.0.6/alipayjsapi.min.js"></script>
  <style type="text/css">
  	.mask_layer {
      width: 100%;
      height: 100%;
      background-color: #000;
      filter: alpha(opacity=50);
      -moz-opacity: 0.5;
      opacity: 0.5;
      position: absolute;
      left: 0px;
      top: 0px;
      display: none;
      z-index: 1000;
     }
     .mask_layer img{
     	position: absolute;
     	top: 0;
     	left: 0;
     	right: 0;
     	bottom: 0;
     	width: 0.8rem;
     	height: 0.8rem;
     	margin: auto;
     }
  </style>
</head>
<body>
    <div class="mask_layer" id="mask_layer" style="text-align: center;">
        <img id="loading" src="/static/img/loading.gif" />
    </div>
	<section class="index">
	  <div class="head">
          <img src="/static/img/home_bg.png"/>
	  	<!--<div class="head-title">
	  		<div class="head-img">
	  			<img src="/static/img/编组.png"/>
	  		</div>
	    	<p>结账</p>
	  	</div>-->
	  </div>
	  <div class="store">
	  	<p id="name" class="text-nowrap">{{.StoreName}}</p>
	  	<p class="name">{{.TableCode}}</p>
	  </div>
	  <div class="bill" style="margin-top: 0.34rem;">
	  	<p>账单金额</p>
	  	<div class="keynumber" class="keynumber" onclick="settime()">
	  		<span>¥</span>
	  		<span id="finalPrice1"></span><span style="visibility: hidden;font-weight: lighter;" id="cur1" class="cursor">|</span>
	  	</div>  	
	  	<button id="submit" class="btn">点击支付</button>
	  </div>
	  
	  <div id="container_b" class="container_b" style="display: none;z-index: 99;background: #F9F9F9;">
	  	<div id="retract" class="container_title" onclick="rest()">
	  		<img src="/static/img/icon_pulldown.png"/>
	  	</div>
      <table id="container_b_table" class="container_b_table" cellpadding="0" cellspacing="0">
        <tr class="container_tr">
          <td id="num1" class="container_b_table_td">1</td>
          <td id="num2" class="container_b_table_td">2</td>
          <td id="num3" class="container_b_table_none">3</td>
        </tr>
        <tr class="container_tr">
          <td id="num4" class="container_b_table_td">4</td>
          <td id="num5" class="container_b_table_td">5</td>
          <td id="num6" class="container_b_table_none">6</td>
        </tr>
        <tr class="container_tr">
          <td id="num7" class="container_b_table_td">7</td>
          <td id="num8" class="container_b_table_td">8</td>
          <td id="num9" class="container_b_table_none">9</td>
        </tr>
        <tr class="container_tr">
        	<td id="spot" class="container_b_table_td table_color">·</td>
          <td id="num0" class="container_b_table_td">0</td>
          <td id="delete" class="container_b_table_none table_color" ><img src="/static/img/icon_del.png"/></td>
        </tr>
      </table>
    </div>
	</section>
    <div style="display: none;" id="">
        <span id="uuid">{{.UUID}}</span>
        <span id="Channel">{{.Channel}}</span>
        <span id="openid">{{.OpenId}}</span>
    </div>

	<!--<div class="mask">
		
	</div>-->
	<script type="text/javascript">
	$(function() {
        settime()
	    $("#num1").on("touchend", function(e) {
	        clickOne(1);
	         e.preventDefault();
	    });
	    $("#num2").on("touchend", function(e) {
	        clickOne(2);
	         e.preventDefault();
	    });
	    $("#num3").on("touchend", function(e) {
	        clickOne(3);
	         e.preventDefault();
	    });
	    $("#num4").on("touchend", function(e) {
	        clickOne(4);
	         e.preventDefault();
	    });
	    $("#num5").on("touchend", function(e) {
	        clickOne(5);
	         e.preventDefault();
	    });
	    $("#num6").on("touchend", function(e) {
	        clickOne(6);
	         e.preventDefault();
	    });
	    $("#num7").on("touchend", function(e) {
	        clickOne(7);
	         e.preventDefault();
	    });
	    $("#num8").on("touchend", function(e) {
	        clickOne(8);
	         e.preventDefault();
	    });
	    $("#num9").on("touchend", function(e) {
	        clickOne(9);
	         e.preventDefault();
	    });
	    $("#num0").on("touchend", function(e) {
	        clickOne(0);
	         e.preventDefault();
	    });
	    $("#spot").on("touchend", function(e) {
	        dot();
	         e.preventDefault();
	    });
	
	    $("#delete").on("touchend", function(e) {
	        del();
	         e.preventDefault();
	    });
	    $("#submit").on("click", function(e) {
	        doPayAgain();
	         e.preventDefault();
	    });

  	})
		var select_input = $("#finalPrice1");
  	var select_input_idx = 0;
  	var interval
    function GetQueryString(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) return unescape(r[2]);
        return null;
    }

    function time(){
      var dis= $(".cursor").css("visibility");
      if(dis == "hidden"){
        $(".cursor").css("visibility","visible");
      }else{
        $(".cursor").css("visibility","hidden");
      }
    }

    function ready(callback) {
      // 如果jsbridge已经注入则直接调用
      if (window.AlipayJSBridge) {
        callback && callback();
      } else {
        // 如果没有注入则监听注入的事件
        document.addEventListener('AlipayJSBridgeReady', callback, false);
      }
    }

    function settime(){
    	if($("#container_b").is(":hidden")){
    		$("#container_b").slideDown(100);
	//  	$('#cur1').css("visibility","visible");
	    	interval = setInterval("time()", 600);
    	}
    }
    function rest(){
    	$("#container_b").slideUp()
    	clearInterval(interval)
    	$('#cur1').css("visibility","hidden")
    }

    function doPayAgain() {
      var fee = getCurValue2();
      if (!checkPriceFormat(fee)) {
        alert("请输入合法的消费金额");
        return;
      }

      var o = {};
      o["amount"] = fee*100 + "" || '';
      o["uuid"] = $("#uuid").text();
      o["channel"] = $("#Channel").text();
      o["open_id"] = $("#openid").text();
     	$(".mask_layer").css('display',"block")
     $.ajax({
        url: SerAddr+"/pay/order",
        type: "POST",
        data: o,
        success: function(data) {
        	$(".mask_layer").css('display',"none")
          if (data.code == "0") {
            if(o["channel"] == "ALIPAY"){
               ready(function(){
                // 打开淘宝首页，自动读取title，并且去除右边菜单
                AlipayJSBridge.call('pushWindow', {
                  url: data.data,
                  param: {
                    readTitle: true,
                    showOptionMenu: false,
                    closeAllWindow:true
                  }
                });
              });
            }else{
          	  top.location.href=data.data
            }
//          AlipayJSBridge.call("tradePay", {
//          	tradeNO: data.data.up_trade_no
//          }, function (result) {
//            if (result.resultCode=='4000'){
//              alert("订单支付失败")
//            }else if (result.resultCode=='6001'){
//              alert("取消支付")
//            }else if (result.resultCode=='6002'){
//              alert("网络连接出错")
//            }else if (result.resultCode=='99'){
//              alert("用户点击忘记密码,退出支付")
//            }else if (result.resultCode=='9000') {
//              window.location.href ="/pay/paysuccess?trade_no="+data.data.trade_no;
//            }else{
//              alert("支付失败")
//            }
//          }); 
          } else {
            alert(data.msg)
          }
        },error:function(){
        	$(".mask_layer").css('display',"none")
        	alert("网络异常")
        }
      })
    }


    function isContains(str, substr) {
      return str.indexOf(substr) >= 0;
    }

    function clickOne(num) {
      var old_price = getCurValue();
      //保证只有两位小数
      if (isContains(old_price, ".")) {
        var ps = old_price.split(".");
        if (ps.length == 2 && ps[1].length >= 2) {
          return;
        }
      }
      //保证小数点前面最多6位
      if (!isContains(old_price, ".")) {
        if (old_price.length >= 6) {
          return;
        }
      }
      if (old_price == "0") {
        old_price = "";
      }
      old_price = old_price + String(num); //给当前值追加字符
      setValue(old_price); //刷新显示
    }

    function getCurValue2() { //获取当前值
        var old_price = $("#finalPrice1").text();
        var str = String(old_price); //获得当前显示数据
        str = (str == "") ? "" : str;
        return str;
    }

    function getCurValue() { //获取当前值
      var old_price = select_input.text();
      var str = String(old_price); //获得当前显示数据
      str = (str == "") ? "" : str;
      return str;
    }

    function setValue(str) {
        select_input.html(str);
        if (select_input_idx == 1){
            $("#fee").html(str)
        }
    }

    function del() { //退格
        var old_price = getCurValue();
        if (old_price.length > 0) {
            old_price = old_price.substr(0, old_price.length - 1);
        }
        old_price = (!(old_price.length == 0) && (old_price != "0") && (old_price != "0.") && (old_price != "0.0")) ? old_price : "";
        setValue(old_price);
    }

    function dot() {
        var old_price = getCurValue();
        if (isContains(old_price, ".")) {
            return;
        }
        if (old_price.length == 0) {
            old_price = "0";
        }
        old_price = old_price + ".";
        setValue(old_price);
    }

    function checkPriceFormat(num) {
      if (!isNaN(num) && num.length > 0) {
        var dot = num.indexOf(".");
        if (dot != -1) {
          var dotCnt = num.substring(dot + 1, num.length);
          if (dotCnt.length > 2) {
            return false;
          } else {
            return true;
          }
        } else {
          return true;
        }
      } else {
        return false;
      }
      return false;
    }
	</script>
	
</body>
</html>